<template>
    <!--组件的结构 --> 
    <div class="school">
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showSchoolName">点击我显示学校名称</button>
    </div>
</template>

<script setup>
    let schoolName = '宁夏大学';
    let address = '宁夏银川西夏区';
    let showSchoolName = function(){
        alert(schoolName);
    }
    //组件交互相关的代码（数据，方法等等）
   /* export default{
        name:'School',
        //选项式
        setup() {
            let schoolName = '宁夏大学';
            let address = '宁夏银川西夏区';
            let showSchoolName = function(){
                alert(schoolName);
            }
            return{schoolName,address,showSchoolName}
        }
    } */
    //export default School; //暴漏组件（默认暴漏）
</script>

<style scoped>
  /*组件的样式*/
  .school{
    background-color: aqua;
  }
</style>